<template>
  <view>
    <li-statistics
      fn="GetRechargeConsume"
      :param.sync="param"
      :pageData.sync="pageData"
      :isLoaded.sync="isLoaded"
    >
      <template #li>
        <block v-if="isLoaded">
          <view class="justify-around">
            <view class="flex-column">
              <view class="item-big-title">储值汇总(元)</view>
              <view class="item-big-content">{{
                pageData.allAmount.toFixed(2)
              }}</view>
            </view>
            <view class="flex-column">
              <view class="item-big-title">储值合计(元)</view>
              <view class="item-big-content">{{
                pageData.rechargeAllAmount.toFixed(2)
              }}</view>
            </view>
          </view>
          <view class="justify-around">
            <view class="justify-column">
              <view class="item-title">储值金额</view>
              <view class="item-content">{{
                pageData.rechargeAmount.toFixed(2)
              }}</view>
            </view>
            <view class="justify-column">
              <view class="item-title">赠送金额</view>
              <view class="item-content">{{
                pageData.giftAmount.toFixed(2)
              }}</view>
            </view>
            <view class="justify-column">
              <view class="item-title">消费合计(元)</view>
              <view class="item-content">{{
                pageData.consumeAllAmount.toFixed(2)
              }}</view>
            </view>
          </view>
          <u-gap height="1" bgColor="#f1f1f1" />
          <view class="justify-around">
            <view class="justify-column">
              <view class="item-title">储值余额消费</view>
              <view class="item-content">{{
                pageData.rechargeConsumeAmount.toFixed(2)
              }}</view>
            </view>
            <view class="justify-column">
              <view class="item-title">赠送余额消费</view>
              <view class="item-content">{{
                pageData.giftConsumeAmount.toFixed(2)
              }}</view>
            </view>
          </view>
        </block>
      </template>
    </li-statistics>
  </view>
</template>

<script>
import date from "@/utils/date";
export default {
  data() {
    return {
      isLoaded: false,
      pageData: {},
      param: {
        dataTimeRange: [date.getToday(), date.getToday()],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.justify-around {
  display: flex;
  justify-content: space-around;
}

.flex-column {
  display: flex;
  padding: 30rpx 0;
  padding-top: 0;
  flex-direction: column;
  align-items: center;
}

.item-title {
  font-size: 12px;
  margin: 8px;
}
.item-big-title {
  font-size: 16px;
}

.item-big-content {
  color: #f3c45d;
  margin-top: 5px;
  font-size: 14px;
  text-align: center;
}
.item-content {
  margin-bottom: 8px;
  margin-top: 5px;
  font-size: 12px;
  text-align: center;
}
</style>
